<template>
  <div style="margin-bottom: 20px">
    <span style="font-size: 18px;font-weight: bold">
      输入提示文本，点击生成按钮生成预测
    </span>
  </div>
  <el-divider/>
  <el-card class="box-card" v-loading="loading">
    <el-form
        :model="form"
        :rules="rules" ref="form"
        label-width="100px"
        label-position="top"
        style="margin-top: 20px"
        class="form"
        size="medium"
    >
      <el-form-item label="真实文本" prop="text" required>
        <el-input
            type="textarea"
            placeholder="请输入提示文本"
            v-model="form.text"
            :autosize="{ minRows: 4, maxRows: 8}"
            maxlength="1000"
            show-word-limit>
        </el-input>
      </el-form-item>
      <el-form-item label="展示预测前N个排名的预测概率" prop="topN" required>
        <el-input v-model="form.topN"/>
      </el-form-item>
      <el-form-item label="可接受的最大排名" prop="maxRank" required>
        <el-input v-model="form.maxRank"/>
      </el-form-item>
    </el-form>
    <div style="text-align: right">
      <el-button type="primary" round @click="onPredictClick">预测</el-button>
    </div>
    <el-divider/>
  </el-card>
  <div v-for="each in resultCardList" :key="'true-text-prediction-card-' + each.cardIndex">
    <el-divider/>
    <true-text-prediction-task-card
        :text="each.text"
        :card-index="each.cardIndex"
        :top-n="each.topN"
        :max-rank="each.maxRank"
        @close="onCardClose(each.cardIndex)"/>
  </div>
</template>

<script>
import TrueTextPredictionTaskCard from "./TrueTextPredictionTaskCard.vue";

export default {
  name: "TrueTextPredictionTask",
  components: {
    TrueTextPredictionTaskCard
  },
  data() {
    return {
      resultCardList: [],
      resultCardIndex: 0,
      loading: false,
      form: {
        text: '',
        topN: 10,
        maxRank: 1000,
      },
      rules: {
        text: [
          {
            required: true,
            message: '真实文本不能为空',
            trigger: 'blur'
          },
        ],
        topN: [
          {
            required: true,
            message: 'top n不能为空',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              value = Number(value)
              if (!Number.isInteger(value)) {
                callback(new Error('top n必须是整数'))
              } else {
                if (value <= 0) {
                  callback(new Error('top n必须大于0'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        maxRank: [
          {
            required: true,
            message: '可接受的最大排名不能为空',
            trigger: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              value = Number(value)
              if (!Number.isInteger(value)) {
                callback(new Error('可接受的最大排名必须是整数'))
              } else {
                if (value <= 0) {
                  callback(new Error('可接受的最大排名必须大于0'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
      }
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate((valid) => {
        return !!valid;
      });
    },
    onCardClose(cardIndex) {
      for (let i = 0; i < this.resultCardList.length; ++i) {
        if (this.resultCardList[i].cardIndex === cardIndex) {
          this.resultCardList.splice(i, 1);
          break;
        }
      }
    },
    onPredictClick() {
      let topN = Number(this.form.topN), text = this.form.text, maxRank = Number(this.form.maxRank)
      if (!Number.isInteger(topN) || topN <= 0 || !Number.isInteger(maxRank) || maxRank <= 0
          || text.length <= 0) {
        return
      }
      this.resultCardList.unshift({
        text,
        cardIndex: this.resultCardIndex,
        topN,
        maxRank
      })
      this.resultCardIndex += 1
    },
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  text-align: left;
  margin-top: 10px;
}
</style>